<template>
  <view class="page">
    <view class="fui-wrap">
      <fui-form ref="formRef" top="0" :model="formData">
        <view class="text">驳回理由</view>
        <fui-textarea min-height="240rpx" radius='16' placeholder="请输入驳回理由" autoHeight maxlength='200' isCounter v-model="formData.auditMsg"></fui-textarea>
        <view class="fui-btn__box">
          <fui-button text="取消" class="btn-50 btn-back" bold @click="tab.navigateBack"></fui-button>
          <fui-button text="保存" class="btn-50" bold @click="handleSubmit"></fui-button>
        </view>
      </fui-form>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import goodsApi from '@/api/goods'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const formData = ref({
  auditState: 2,
  auditMsg: ''
})

onLoad(option => {
  formData.value.id = option.id
})

const handleSubmit = () => {
  if (!formData.value.auditMsg) {
    modal.msgError('请输入驳回理由！')
    return
  }
  
  try {
    goodsApi.doAudit(formData.value).then((res) => {
      if (res.code === 0) {
        if (res.data == -1) {
          modal.msgSuccess('供应商处于停用状态！')
        } else {
          modal.msg('商品已驳回！')
          setTimeout(() => {
            uni.navigateBack({
              delta: 2
            })
          }, 1500)
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.msg('商品驳回失败！')
  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  padding: 30rpx 36rpx;
  box-sizing: border-box;
  overflow-y: auto;
  background: #f8f8f8;
  font-family: PingFang SC, PingFang SC;

  :deep(.fui-form__msg-wrap) {
    z-index: 11000;
  }

  :deep(.fui-textarea__wrap) {
    border: 1px solid #dfdfdf;
  }

  .text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30rpx;
  }

  .fui-btn__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60rpx;
  }

  .btn {
    width: calc(25% - 20rpx) !important;
    height: 76rpx !important;
    flex: inherit;

    :deep(.fui-button__primary) {
      height: 76rpx !important;
    }
  }

  .btn-50 {
    width: calc(50% - 20rpx) !important;
    flex: inherit;
  }

  .btn-back {
    :deep(.fui-button__primary) {
      background-color: #ffffff !important;
      color: var(--fui-color-primary) !important;
      border: 1px solid var(--fui-color-primary) !important;

      .fui-text__bold {
        color: var(--fui-color-primary) !important;
      }
    }
  }
}
</style>